<template>

    <el-row >
    <el-col :span="12">
      <el-card class="weather" shadow="hover">
        <h3 >今日天气</h3>
        <div class="weather-info">
          <img :src="city_weather_img" class="weather-icon" alt="天气图标">
          <div class="weather-details">
            <p class="temperature">{{ response.now?.temperature }}°C</p>
            <p class="weather-text">{{ response.now?.text }}</p>
          </div>
        </div>
        <div class="location">{{ loc.country + " " + loc.province + " " + loc.city }}</div>
      </el-card>
    </el-col>
  </el-row>
</template>
  
<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

const response = ref('')
const city_weather_img = ref('')

const loc = ref({
    country: "中国",
    province: "江苏",
    city: "南京",
})

onMounted(() => {
  const api_key = 'your_api_key' // 替换为你的API密钥 // 获取地址：https://www.seniverse.com/products
  axios.get(`https://api.seniverse.com/v3/weather/now.json?key=${api_key}&location=ip&language=zh-Hans&unit=c`).then((res) => {
      response.value = res.data.results[0]
      const path = response.value.location.path.split(',')
      loc.value.country = path[3]
      loc.value.province = path[2]
      loc.value.city = path[1]
      const img_path = `../../../assets/icons/white/${response.value.now.code}@2x.png`
      import(img_path).then((res) => {
          city_weather_img.value = res.default
      }).catch(() => {})
  }).catch((err) => {
      console.log(err)
  })
})

</script>


<style lang="css" scoped>
.weather {
  margin-top: 20px;
  border-radius: 10px;
  transition: box-shadow 0.3s ease;
  margin-left: 30px;
}

.weather:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.weather-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.weather-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather-icon {
  width: 80px; 
  height: 80px; 
  margin-right: 30px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}
.temperature {
  font-size: 36px;
  font-weight: bold;
  color: #789a61; 
}

.weather-text {
  font-size: 24px;
  color: #575454; 
}

.location {
  font-size: 18px;
  color: #4a4949; /* 位置颜色 */
  margin-top: 5px;
  text-align: center;
}
</style>